<template>
	<view class="content an-sign-map">
		<!-- 打卡地图 -->
		<map style="width: 750rpx; height: 100%;" 
			ref="signMap"
			id="signMap"
			:latitude="latitude" 
			:longitude="longitude" 
			:markers="markers"
			:include-points="mappoint">
		</map>
		
	</view>
</template>

<script>
	const util = require('@/common/util.js');
	export default {
		data() {
			return {
				latitude: 39.909,
				longitude: 116.39742,
				markers: [{	//标记点用于在地图上显示标记的位置
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../static/img/location.png',
					callout:{
						content: '测试'
					}
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../static/img/location.png'
				}],
				mappoint: [],  //定位坐标
				list:[],
				podData:{
					page: 1,
					pageSize: 50	// 请求数据条数
				}
			}
		},
		onLoad(){
			this.mapCtx = uni.createMapContext('signMap')
			this.getList()
		},
		methods: {
			getList(){
				uni.showLoading({
				    title: '加载中'
				})
				this.$api.selectAllUsersign(this.podData).then(res=>{
					uni.hideLoading()
					this.list = res.list
					this.showMap()
				})
			},
			async showMap(){	// 地图上面显示定位点
				let newdata = this.list;
				let newmapdata = [];
				let newmappoint = [];
				let newPolyline = [];
				for(let i= 0;i<newdata.length; i++){
				  if (newdata[i].sign != null && newdata[i].sign != null){
					  let imgUrl = ''
					  await util.getImg(newdata[i].avatarurl).then(val=>{ // 下载用户头像
					  		imgUrl = val
					  })
					newmapdata.push({
						id:newdata[i].id,
						iconPath: imgUrl,
						longitude: newdata[i].sign.longitude,
						latitude: newdata[i].sign.latitude,
						width:'30',
						height:'30',
					});
					newmappoint.push({
						longitude: newdata[i].sign.longitude,
						latitude: newdata[i].sign.latitude,
					});
				  }
				}
				this.markers = newmapdata
				this.mappoint = newmappoint
			},
			
		}
	}
</script>

<style>

</style>
